<template>
  <div class="cleanup-assignment">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>清运分配</h2>
      <p>管理清运员与回收箱的分配关系</p>
    </div>

    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="清运员姓名">
          <el-input
            v-model="searchForm.staffName"
            placeholder="请输入清运员姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="回收箱编号">
          <el-input
            v-model="searchForm.deviceCode"
            placeholder="请输入回收箱编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="区域">
          <el-input
            v-model="searchForm.area"
            placeholder="请输入区域"
            clearable
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="已分配" value="assigned" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 清运员列表 -->
    <el-card class="staff-card">
      <template #header>
        <div class="card-header">
          <span>清运员列表</span>
        </div>
      </template>

      <el-table :data="staffList" stripe>
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="area" label="负责区域" width="120" />
        <el-table-column prop="assignedCount" label="已分配数量" width="100">
          <template #default="{ row }">
            <el-tag :type="row.assignedCount > 0 ? 'success' : 'info'">
              {{ row.assignedCount }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
              {{ row.status === 'active' ? '活跃' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="150" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="handleAssign(row)"
              :disabled="row.status !== 'active'"
            >
              <el-icon><Plus /></el-icon>
              分配
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分配记录列表 -->
    <el-card class="assignment-card">
      <template #header>
        <div class="card-header">
          <span>分配记录</span>
        </div>
      </template>

      <el-table :data="assignmentList" stripe>
        <el-table-column prop="staffName" label="清运员" width="100" />
        <el-table-column prop="deviceCode" label="回收箱编号" width="120" />
        <el-table-column prop="deviceLocation" label="设备位置" min-width="150" />
        <el-table-column prop="assignedAt" label="分配时间" width="150" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag
              :type="row.status === 'assigned' ? 'warning' : row.status === 'completed' ? 'success' : 'info'"
            >
              {{ row.status === 'assigned' ? '已分配' : row.status === 'completed' ? '已完成' : '已取消' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button
              type="warning"
              size="small"
              @click="handleReassign(row)"
            >
              <el-icon><Refresh /></el-icon>
              换人
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(row)"
            >
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="searchForm.page"
          v-model:page-size="searchForm.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="assignmentList.length"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>

    <!-- 分配对话框 -->
    <el-dialog
      v-model="assignmentDialogVisible"
      title="分配回收箱"
      width="500px"
    >
      <el-form :model="assignmentForm" label-width="80px">
        <el-form-item label="清运员">
          <el-select v-model="assignmentForm.staffId" placeholder="请选择清运员">
            <el-option
              v-for="staff in staffList.filter(s => s.status === 'active')"
              :key="staff.id"
              :label="staff.name"
              :value="staff.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="回收箱">
          <el-tree-select
            v-model="assignmentForm.deviceIds"
            :data="deviceTreeData"
            multiple
            show-checkbox
            check-strictly
            placeholder="请选择回收箱"
            style="width: 100%"
            :props="{
              children: 'children',
              label: 'label',
              disabled: 'disabled'
            }"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="assignmentForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="assignmentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAssign">确认分配</el-button>
      </template>
    </el-dialog>

    <!-- 换人对话框 -->
    <el-dialog
      v-model="reassignmentDialogVisible"
      title="更换清运员"
      width="400px"
    >
      <p>确定要将回收箱 {{ currentRow?.deviceCode }} 更换清运员吗？</p>
      <el-select v-model="assignmentForm.staffId" placeholder="请选择新的清运员" style="width: 100%; margin-top: 16px;">
        <el-option
          v-for="staff in staffList.filter(s => s.status === 'active' && s.id !== currentRow?.staffId)"
          :key="staff.id"
          :label="staff.name"
          :value="staff.id"
        />
      </el-select>
      <template #footer>
        <el-button @click="reassignmentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmReassign">确认更换</el-button>
      </template>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="删除分配记录"
      width="400px"
    >
      <p>确定要删除回收箱 {{ currentRow?.deviceCode }} 的分配记录吗？</p>
      <template #footer>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确认删除</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Search, Refresh, Plus, Delete } from '@element-plus/icons-vue'
import { useCleanupAssignment } from './CleanupAssignment.script'

const {
  searchForm,
  staffList,
  assignmentList,
  assignmentForm,
  assignmentDialogVisible,
  reassignmentDialogVisible,
  deleteDialogVisible,
  currentRow,
  handleSearch,
  handleReset,
  handleAssign,
  handleReassign,
  handleDelete,
  confirmAssign,
  confirmReassign,
  confirmDelete,
  handlePageChange,
  handleSizeChange
} = useCleanupAssignment()
</script>

<style lang="scss" scoped>
.cleanup-assignment {
  padding: 20px;

  .page-header {
    margin-bottom: 24px;

    h2 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 8px 0 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .search-card {
    margin-bottom: 20px;

    .el-form {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;

      .el-form-item {
        margin-bottom: 0;
      }
    }
  }

  .staff-card,
  .assignment-card {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
